<template>
  <div class="sieves__right-bottom-content">
    <div class="sieves__tab-box">
      <div class="sieves__tab-pane-default" :class="activeSign === 0 ? 'sieves__tab-pane-active':'sieves__tab-pane-not-active'" @click="activeTab(0)">厚度趋势</div>
      <div class="sieves__tab-pane-default" :class="activeSign === 1 ? 'sieves__tab-pane-active':'sieves__tab-pane-not-active'" @click="activeTab(1)">厚度平均</div>
      <div class="sieves__tab-pane-default" :class="activeSign === 2 ? 'sieves__tab-pane-active':'sieves__tab-pane-not-active'" @click="activeTab(2)">占比趋势</div>
    </div>
    <div class="sieves__charts-contents">
     <bottom-right-first :device-id="deviceId" v-if="activeSign === 0"/>
      <bottom-right-second :device-id="deviceId" v-if="activeSign === 1"/>
      <bottom-right-third :device-id="deviceId"  v-if="activeSign === 2"/>
    </div>
  </div>
</template>

<script setup lang="ts">
import BottomRightFirst from './bottom-right-first'
import BottomRightSecond from './bottom-right-second'
import BottomRightThird from './bottom-right-third'

const props = defineProps({
  deviceId: {
    type: String,
    default: '',
    required: true
  }
})

const activeSign = ref(0)
function getData(){
  activeSign.value = 0
}
function activeTab(sign){
  activeSign.value = sign
}
</script>


<style scoped lang="scss">
.sieves__right-bottom-content {
  width: 100%;
  height: 98%;
  display: flex;
  flex-flow: column nowrap;
  align-items: center;
  .sieves__tab-box{
    width: 100%;
    height: 10%;
    display: flex;
    flex-flow: row nowrap;
    //border: red solid 1px;
    .sieves__tab-pane-default{
      width: 15%;
      font-size: 20px;
      text-align: center;
      line-height: 35px;
      cursor:pointer;
    }
    .sieves__tab-pane-active{
      border-style: solid;
      border-color: #6586ec;
      border-width: 0.5px;
      background: linear-gradient(92deg, #0072FF 0%, #00EAFF 48.85%, #01AAFF 100%);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
    }
    .sieves__tab-pane-not-active{
      border: #6586ec solid 0.5px;
      background: linear-gradient(92deg, #C56E06B2 0%, #FF9D29D2 48.85%, #F58403CD 100%);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
    }
  }
  .sieves__tab-pane-default:hover{
    color: #31abe3;
  }
  .sieves__charts-contents{
    width: 100%;
    height: 90%;
    //border: yellow solid 1px;
  }
}
</style>